<template>
  <view class="page-detail">
    <view class="navbar">
      <u-icon
        name="arrow-left"
        color="#191919"
        size="20"
        @click="goBack()"
        class="back-box"
      ></u-icon>
      <view class="title">详情</view>
    </view>
    <view class="context content nyj-con-detail">
      <view class="number-title"></view>
      <u-list
        title-bg-color="rgb(243, 244, 246)"
        customStyle="{'font-size': '16px'}"
      >
        <u-cell title="企业名称" :label="detail.qyName" center></u-cell>
        <u-cell title="统一社会信用代码" :value="detail.nssbh" center></u-cell>
        <u-cell title="注册详细地址" :label="detail.zcxxdz" center></u-cell>
        <u-cell title="行政区划" :value="detail.streetName" center></u-cell>
        <u-cell title="法定代表人" :value="detail.fddbr" center></u-cell>
        <u-cell title="法人电话" :value="detail.fzrdh" center></u-cell>
        <u-cell title="注册资金" :value="detail.zczj" center></u-cell>
        <u-cell title="注册时间" :value="detail.zcsj" center></u-cell>
        <u-cell title="经营年限" :value="detail.jynx" center></u-cell>
        <u-cell title="核定产能" :value="detail.hdcn" center></u-cell>
        <u-cell title="释放产能" :value="detail.sfcn" center></u-cell>
        <u-cell title="经营范围" :value="detail.jyfw" center></u-cell>
        <u-cell
          title="生产煤种"
          :value="getCoalTexts(coalOptions, detail.scmzNameInfo)"
          center
        ></u-cell>
        <u-cell title="业务联系人" :value="detail.ywlxr" center></u-cell>
        <u-cell title="业务联系电话" :value="detail.ywlxdh" center></u-cell>
        <u-cell title="实际控制人" :value="detail.sjkgr" center></u-cell>
        <u-cell title="实际控制人电话" :value="detail.sjkgrdh" center></u-cell>
      </u-list>
    </view>
    <view class="nyj-btns btns">
      <button type="primary" @click="goApply">审核</button>
    </view>
  </view>
</template>

<script>
import { queryFirmInfo, queryCoalData } from "@/api/cockpit/need";
export default {
  props: {
    ticketCode: {
      type: String,
    },
    pCode: {
      type: String,
    },
  },
  data() {
    return {
      id: "",
      instanceId: "",
      detail: {},
      coalOptions: [],
    };
  },
  onShow() {
    this.getOptionsData();
  },
  onLoad(option) {
    this.id = option.id;
    this.instanceId = option.instanceId;
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: "/pages/need/index",
      });
    },
    goApply() {
      this.$tab.navigateTo("/pages/need/apply?instanceId=" + this.instanceId);
    },
    getOptionsData() {
      queryCoalData().then((res) => {
        this.coalOptions = res.data;
        this.getDetail();
      });
    },
    async getDetail() {
      let res = (await queryFirmInfo({ id: this.id })) || {};
      this.detail = res.data;
      let scmzName = this.getCoalTexts(this.coalOptions, this.detail.scmz);
      this.detail.scmzNameInfo = scmzName;
    },
    // 回显煤种数据文本
    getCoalTexts(datas, value, separator) {
      if (value === undefined) {
        return "";
      }
      if (datas == undefined) {
        return value;
      }
      var actions = [];
      var currentSeparator = undefined === separator ? "," : separator;
      var temp = value.split(currentSeparator);
      Object.keys(value.split(currentSeparator)).some((val) => {
        var match = false;
        Object.keys(datas).some((key) => {
          if (datas[key].coalNum == "" + temp[val]) {
            actions.push(datas[key].coalName + currentSeparator);
            match = true;
          }
        });
        if (!match) {
          actions.push(temp[val] + currentSeparator);
        }
      });
      return actions.join("").substring(0, actions.join("").length - 1);
    },
    preview() {
      this.$tab.navigateTo(
        `/pages/common/qrcode/index?code=${this.detail.ticketCode}`
      );
    },
    // 回显煤种数据文本
    getCoalTexts(datas, value, separator) {
      if (value === undefined) {
        return "";
      }
      if (datas == undefined) {
        return value;
      }
      var actions = [];
      var currentSeparator = undefined === separator ? "," : separator;
      var temp = value.split(currentSeparator);
      Object.keys(value.split(currentSeparator)).some((val) => {
        var match = false;
        Object.keys(datas).some((key) => {
          if (datas[key].coalNum == "" + temp[val]) {
            actions.push(datas[key].coalName + currentSeparator);
            match = true;
          }
        });
        if (!match) {
          actions.push(temp[val] + currentSeparator);
        }
      });
      return actions.join("").substring(0, actions.join("").length - 1);
    },
  },
};
</script>

<style lang="less" scoped>
.page-detail {
  .navbar {
    .header-info {
      display: flex;
      height: 90rpx;
      line-height: 90rpx;
      margin-top: 86rpx;

      .u-icon {
        width: 10%;
        padding-left: 25rpx;
      }

      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        width: 75%;
      }

      .right-btn {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }

  .top-box {
    background-image: url("/static/images/common/list-top-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 16rpx;
    margin-top: 20rpx;
  }

  .context {
    background-color: #ffffff;
    margin: 134rpx 20rpx 20rpx 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
    border-radius: 16rpx;

    .u-cell__body {
      display: flex;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .number-title {
      font-size: 28rpx;
      color: #233239;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      padding-right: 28rpx;
      text-align: right;
    }

    /deep/.u-cell {
      line-height: 96rpx;
    }

    /deep/.u-cell__title-text {
      font-size: 32rpx;
      color: #666666;
    }

    /deep/.u-cell__value {
      font-size: 34rpx;
      color: #333333;
    }

    /deep/.u-cell__label {
      font-size: 34rpx;
      color: #333333;
    }
  }

  .step-box {
    background: #ffffff;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
  }
}
</style>
